<% content_for :head do %>
  <%= javascript_include_tag :highcharts %>

  <script type="text/javascript">
    $(function() {
      new Highcharts.Chart({
      chart: {
         renderTo: 'orders_chart',
         zoomType: 'xy',
         margin: [0, 90, 50, 60]
      },
      title: {
         text: ''
      },
      xAxis: [{
          type: "datetime",
          labels: {
            x: 25,
            y: 20,
            rotation: 20
          },
          endOnTick: true
      }],
      yAxis: [{ // Primary yAxis
         labels: {
            formatter: function() {
               return this.value + ' Kč';
            },
            style: {
               color: '#89A54E'
            }
         },
         title: {
            text: 'Celková cena objednávek',
            style: {
               color: '#89A54E'
            },
            margin: 70
         },
         min: 0
      }, { // Secondary yAxis
         title: {
            text: 'Celkový počet objednávek',
            margin: 50,
            style: {
               color: '#4572A7'
            }
         },
         labels: {
            style: {
               color: '#4572A7'
            }
         },
         opposite: true
      }],
      tooltip: {
         formatter: function() {
            return Highcharts.dateFormat("%e. %B, %Y", this.x) + (this.series.name == 'Počet objednávek' ? (this.y == 1 ? ' byla objednána ' + this.y + ' objednávka' : ' byly přijaty ' + this.y + ' objednávky') : ' bylo objednáno za ' + this.y + ' Kč')
         }
      },
      legend: {
         layout: 'vertical',
         style: {
            left: '90px',
            bottom: 'auto',
            right: 'auto',
            top: '70px'
         },
         backgroundColor: '#FFFFFF'
      },
      series: [{
         name: 'Počet nových objednávek',
         color: '#4572A7',
         type: 'column',
         yAxis: 1,
         pointInterval: <%= 1.day * 1000 %>,
         pointStart: <%= (4.weeks.ago.to_i) * 1000 %>,
         data: [<%= orders_chart_series_2(@orders_by_day, 4.weeks.ago) %>]
      }, {
         name: 'Celková cena objednávek',
         color: '#89A54E',
         type: 'line',
         pointInterval: <%= 1.day * 1000 %>,
         pointStart: <%= (4.weeks.ago.to_i) * 1000 %>,
         data: [<%= orders_chart_series_1(@orders_by_day, 4.weeks.ago) %>]
      }]
     });
  });
  </script>
<% end %>

<div id="orders_chart" style="height: 210px; margin-top: 10px;"></div>